<!--  -->
<template>
  <div class="leftTopModule">
    <header class="head">
        <titleModule :title="state.titleName"></titleModule>
    </header>
    <section class="main" id="main"></section>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import titleModule from '../../components/title/index.vue'
import G2 from '@antv/g2';
const state = reactive({
    titleName:'各区GDP'
})
//1.创建数据源
const data = [
    { genre:'Sports',sold:275 },
    { genre:'Strategy',sold:115 },
    { genre:'Action',sold:120 },
    { genre:'Shooter',sold:350 },
    { genre:'Other',sold:150 },
]
//2.创建Chart对象
const chart = new G2.Chart({
   container:'main',//指定图标容器ID
   width:600,//图表宽度
   height:300,//图表高度 
})
console.log(chart)
//3.载入数据源
chart.source(data);
//4.创建图形语法,绘制柱状图，由genre和sold两个属性决定图形位置，genre映射x轴,sold映射y轴
chart.interval().position('genre*sold').color('genre')
//5.渲染图表
chart.render();
</script>
<style  scoped>
.leftTopModule{
    width: 100%;
    height: 100%;
}
.head{
    width: 100%;
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main{
    width: 100%;
    height: 85%;
    
}
</style>